<template>
  <div class="gift-page">
    <div class="gift-page-color">
      <div class="shart">
        <img src="../../assets/img/shart.png" class="shart-image">
      </div>
    </div>
    
  </div>
</template>

<script>
import wx from "weixin-js-sdk"
import $fly from "flyio"
import api from "../../assets/js/api.js"
export default {
  name: 'GiftPage',
  //进入页面前根据条件判断是从分享按钮点击进来还是点击分享链接进来，点击分享按钮进来就不跳转，点击分享链接进来就跳转到赠字详情页
  beforeRouteEnter (to, from, next) {
    // if ( localStorage.getItem("giftPage") ) {
    //   next()
    //   localStorage.setItem("notRefreshing", "notRefreshing")
    //   localStorage.removeItem("giftPage")
    //   window.location.reload()
    // } else if (localStorage.getItem("notRefreshing")) {
    //   next()
    //   localStorage.removeItem("notRefreshing")
    // } else {
    //   next(`/GiftInformation?${to.query.code}`)
    // }

    if ( localStorage.getItem("giftPage") ) {
      next()
    } else {
      next(`/GiftInformation?${to.query.code}`)
    }
  },
  mounted () {
    this.jsSdk()
  },
  methods: {
    jsSdk () { //获取微信sdk
      $fly.get(`${api.host}/weixin/jssdk`, {
        url: location.href
      })
      .then( (res) => {
        if (res.status === 200) {
          const names = this.$route.query.names //创建用户微信名变量，用于微信自定义分享，因为wx自定义分享重无法获取this.$route.query.names
          const codes = this.$route.query.code
          wx.config({
            debug: true,
            appId: res.data.appId,
            nonceStr: res.data.nonceStr,
            timestamp: res.data.timestamp,
            signature: res.data.signature,
            jsApiList: res.data.jsApiList
          })
          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({ 
              title: '集字赢好礼', // 分享标题
              desc: `${names}大方赠送字给你，赶紧收下，集满字换好礼！`, // 分享描述
              link: `http://word.xmfinger.com/GiftInformation?code=${codes}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://word.xmfinger.com/icon.png',
              success: function () {
                // 设置成功
              }
            })
            wx.updateTimelineShareData({ 
              title: `${names}大方赠字给你，助力你集字赢好礼。`, // 分享标题
              link: `http://word.xmfinger.com/GiftInformation?code=${codes}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://word.xmfinger.com/icon.png', // 分享图标
              success: function () {
                // 设置成功
              }
            })
          })
        }
      })
      .catch( (err) => {
        console.log(err)
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
  .gift-page
    width 100%
    height 1334px
    background url("../../assets/img/shareIt-background.png") no-repeat
    background-size cover
    .gift-page-color
      width 100%
      height 100%
      background-color rgba(0, 0, 0, .5)
      .shart
        width 750px
        height 238px
        position fixed
        top -12px
        left 0
        .shart-image
          width 100%
          height auto
</style>
